<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为极科技 - 专业于各大平台主题开发设计</title>
    <!--<meta name="renderer" content="webkit">-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1″>-->
    <meta name="keywords" content="为极 ，为极科技官方网站 ，手机主题制作 ,企业推广，游戏推广，主题定制，安全鱼，设计师，招聘，主题">
    <meta name="description"
          content="为极科技专注于魅族，小米，华为，乐视，oppo，vivo，三星，联想，金立，努比亚，360平台主题设计，推出游戏上线推广，企业文化推广，影视上线推广等主题优定制，并且持续招聘主题设计师">
    <meta name="application-name" content="pc"/>
    <!--<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1″>-->
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=1280,user-scalable=yes,minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="/images/index/logo.ico">
    <link rel="stylesheet" href="/sources/dist/css/pro_common.css">
    <link rel="stylesheet" href="/sources/dist/css/pro_case.css">
</head>
<body>
<div class="all">
    <c:import url="/header.jsp"></c:import>
    <!--banner-->
    <section class="banner">
        <div class="pic_banner"><img src="/themeAdmin/user/image?tid=${param.tid}&image=${param.bimage}"
                                     alt="产品案例banner">
        </div>
    </section>
    <section class="pro_content">
        <c:forEach var="data" varStatus="step" items="${dataMap}">
            <div  <c:if test="${step.first}"> class="first_div" </c:if>
                    style="background-image: url('/themeAdmin/user/image?tid=${data.tid}&image=${data.image}');background-color:${data.color};height: 780px; ">
                <div class="fl_left pro_text">
                    <h3>${data.name}</h3>
                    <small>${data.sname}</small>
                    <p>${data.content}</p>
                </div>
            </div>
        </c:forEach>
    </section>
    <div class="navigation"></div>
    <!--button-->
    <section class="btn_more"><a href="/caselist">
        <button>更多案例</button>
    </a></section>
    <!--底部信息-->
    <c:import url="/footer.jsp"></c:import>
    <!--备案-->

</div>
<div class="top">
    <%--<img src="/sources/dist/image/top.png" alt="回到顶部箭头">--%>
</div>
<script src="/sources/dist/js/jquery-3.2.1.min.js"></script>
<script src="/javascripts/common.js"></script>
<%--<script src="/sources/dist/js/pro_case.js"></script>--%>
<script>
    $(document).ready(function () {
        var navigation = $('.pro_content>div').length;
        for(var i = 0; i<navigation ; i++){
            $(".navigation").append("<span></span>");
        }
        $(".pro_content>div").each(function (index,elem) {
            $(elem).attr('id',"proDiv"+index);
        });
        $(".navigation>span").click(function () {
            $(".navigation>span").css("background-color","#ffffff");
            $(this).css("background-color","#2e303a");
            $("html,body").animate({scrollTop:$("#proDiv"+$(this).index()).offset().top-80},500);
        });

        $('.head-right li').hover(function () {
            $(this).find("a").css("color","#0093e9");
        },function () {
            if(!$(this).hasClass("active")){
                $(this).find("a").css("color","black");
            }
        });


        $(window).scroll(function () {
            scrollTopIndex();
        });
        scrollTopIndex();
        function scrollTopIndex() {
            if($(document).scrollTop()>450){
                $(".navigation").css("right","20px");
                $(".pro_content>div").eq(0).removeClass("first_div");
                $(".navigation>span").css("background-color","#ffffff");
                $(".navigation>span").eq(Math.ceil(($(document).scrollTop()/($(".pro_content>div").eq(0).offset().top+230)))-1).css("background-color","#2e303a");
            }else {
                $(".navigation").css("right","-20px");
                $(".pro_content>div").eq(0).addClass("first_div");
            }
            //
            // if($(document).scrollTop()>)

        }

    });
</script>
</body>
</html>